<template>
  <div class="test">
    <!-- <a href="#/">首页</a>----
    <a href="#/about">关于</a>
    <br /> -->
    <!-- router-link 默认渲染为a标签，可以通过tag修改为指定的标签 如： tag="span" -->
    <router-link to="/home?name=fly&age=18">首页</router-link>----
    <router-link to="/home/zs/18">首页</router-link>----
    <!-- <router-link :to="'/home/' + name + '/' + age">首页</router-link>---- -->
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: 'zs',
      age: 18
    }
  }
}
</script>
<style lang="scss" scoped>
.test {
  //   .router-link-exact-active {
  //     color: red;
  //     font-size: 50px;
  //   }

  .active {
    color: red;
    font-size: 50px;
  }
}
</style>
